<template>
  <div>
    <div class="head-fixed" :class="{ activebox: showHeaderSticky }">
      <header class="commonwidth">
        <div class="log">
          <img src="http://erabbit.itheima.net/img/logo.0940ebb5.png" alt="" />
        </div>
        <ul class="a">
          <router-link class="s" to="/home">首页</router-link>
          <!-- <router-link ></router-link> -->
          <li
            v-for="(item, index) in arr"
            :key="index"
            @mousedown="Nav(item.id)"
            @mouseover="Navigation1(index)"
            @mouseout="navigationOut1"
          >
            <a href="javascript:;" :class="{ active: textIndex == index }">{{
              item.name
            }}</a>
            <div class="ding" v-show="index == children1">
              <ul>
                <li v-for="(i, index) in item.children" :key="index">
                  <img :src="i.picture" alt="" />
                  <p class="p">{{ i.name }}</p>
                </li>
              </ul>
            </div>
          </li>
        </ul>
      </header>
    </div>
    <div class="head">
      <header class="commonwidth">
        <div class="log">
          <img src="http://erabbit.itheima.net/img/logo.0940ebb5.png" alt="" />
        </div>
        <ul class="b">
          <router-link class="s" to="/home">首页</router-link>
          <li
            @mousedown="Nav(item.id)"
            v-for="(item, index) in arr"
            :key="index"
            @mouseover="Navigation(index)"
            @mouseout="navigationOut"
          >
            <a href="javascript:;" :class="{ active: textIndex == index }">{{
              item.name
            }}</a>
            <div class="ding" v-show="index == children">
              <ul>
                <li v-for="(i, index) in item.children" :key="index">
                  <img :src="i.picture" alt="" />
                  <p class="p">{{ i.name }}</p>
                </li>
              </ul>
            </div>
          </li>
        </ul>
        <div class="search" data-v-0c0eb3a9="">
          <i class="iconfont icon-search icon" data-v-0c0eb3a9=""></i>
          <input type="text" placeholder="搜一搜" data-v-0c0eb3a9="" />
        </div>
        <div
          class="cart"
          data-v-0266f49e=""
          data-v-0c0eb3a9=""
          @mousemove="mousehander()"
        >
          <a href="#/cartg" class="curr" data-v-0266f49e="">
            <i class="iconfont icon-cart" data-v-0266f49e=""></i>
            <em data-v-0266f49e="">{{ Sun }}</em>
          </a>
          <div
            v-if="show"
            class="layer"
            data-v-0266f49e=""
            @mouseout="outHander()"
          >
            <div class="list" data-v-0266f49e="">
              <div
                class="item"
                data-v-0266f49e=""
                v-for="item in cartgArr"
                :key="item"
              >
                <router-link
                  :to="'/product/' + item.id"
                  class=""
                  data-v-0266f49e=""
                >
                  <img :src="item.picture" alt="" data-v-0266f49e="" />
                  <div class="center" data-v-0266f49e="">
                    <p class="name ellipsis-2" data-v-0266f49e="">
                      {{ item.name }}
                    </p>
                    <p class="attr ellipsis" data-v-0266f49e="">
                      {{ item.attrsText }}
                    </p>
                  </div>
                  <div class="right" data-v-0266f49e="">
                    <p class="price" data-v-0266f49e="">{{ item.price }}</p>
                    <p class="count" data-v-0266f49e="">x{{ item.count }}</p>
                  </div>
                </router-link>
                <i class="iconfont icon-close-new" data-v-0266f49e=""></i>
              </div>
            </div>
            <div class="foot" data-v-0266f49e="">
              <div class="total" data-v-0266f49e="">
                <p data-v-0266f49e="">共 {{ Sun }}件商品</p>
                <p data-v-0266f49e="">¥{{ Sum }}</p>
              </div>
              <button
                class="xtx-button ellipsis middle plain"
                data-v-1e3a5560=""
                data-v-0266f49e=""
              >
                去购物车结算
              </button>
            </div>
          </div>
        </div>
      </header>
    </div>
  </div>
</template>
<script>
import axios from "axios";

export default {
  data() {
    return {
      arr: [],
      children: -1,
      textIndex: -1,
      showHeaderSticky: false,
      children1: -1,
      show: false,
      cartgArr: [],
    };
  },
  mounted() {
    this.get();
    this.cartg();
  },
  methods: {
    cartg() {
      axios({
        method: "get",
        url: "http://pcapi-xiaotuxian-front-devtest.itheima.net/member/cart",
        headers: { Authorization: "Bearer " + this.$store.state.login.token },
      }).then((res) => {
        // console.log(res);
        this.cartgArr = res.data.result;
      });
    },
    outHander() {
      this.show = false;
    },
    mousehander() {
      console.log(this.cartgArr.length);
      if (this.cartgArr.length != 0) {
        this.show = true;
      }
    },
    get() {
      axios
        .get(
          "http://pcapi-xiaotuxian-front-devtest.itheima.net/home/category/head"
        )
        .then(
          (res) => {
            // console.log(res);
            if (res.data.msg == "操作成功") {
              this.arr = res.data.result;
              // console.log(this.arr);
            }
          },
          window.addEventListener("scroll", this.scrollHandle) //设置屏幕滚动
        );
    },
    Navigation(index) {
      this.children = index;
      this.textIndex = index;
    },
    navigationOut() {
      this.children = -1;
      this.textIndex = null;
    },
    Navigation1(index) {
      this.children1 = index;
    },
    navigationOut1() {
      this.children1 = -1;
    },
    scrollHandle() {
      //封装滚动函数
      if (document.documentElement.scrollTop >= 90) {
        //控制盒子
        this.showHeaderSticky = true;
      } else {
        this.showHeaderSticky = false;
      }
    },
    Nav(id) {
      this.$router.push({ name: "/category", query: { id: id } });
      // console.log(id);
    },
  },
  // watch:{
  //   $router(val){
  //     this.get()
  //   }
  // }
  beforeRouteUpdate(to, from, next) {
    next();
    this.get();
  },
  computed: {
    Sun() {
      var a = 0;
      this.cartgArr.forEach((i) => {
        a += i.count;
      });
      return a;
    },
    Sum() {
      var b = 0;
      this.cartgArr.forEach((i) => {
        b += i.price * i.count;
      });
      return b;
    },
  },
};
</script>
<style scoped>
.search[data-v-0c0eb3a9] {
  width: 170px;
  height: 32px;
  position: relative;
  border-bottom: 1px solid #e7e7e7;
  line-height: 32px;
}
/* .icon{

} */
.search .icon-search[data-v-0c0eb3a9] {
  position: absolute;
  top: 0px;
  left: 6px;
  margin-top: 6px;
  display: inline-block;
  width: 24px;
  height: 24px;
  font-size: 18px;
  /* margin-left: 5px; */
  background: #000;
  background-size: 100%;
}
.search input[data-v-0c0eb3a9] {
  width: 140px;
  padding-left: 5px;
  color: #666;
  margin-left: 28px;
  /* float: left; */
}
.cart[data-v-0266f49e] {
  width: 30px;
  height: 30px;
  background: pink;
  position: relative;
  z-index: 600;
}
.cart .curr[data-v-0266f49e] {
  height: 32px;
  line-height: 32px;
  text-align: center;
  position: relative;
  display: block;
  background-size: 70%;
}
.cart .curr .icon-cart[data-v-0266f49e] {
  font-size: 22px;
}
.cart .curr em[data-v-0266f49e] {
  font-style: normal;
  position: absolute;
  right: 0;
  top: 0;
  padding: 1px 6px;
  line-height: 1;
  background: #e26237;
  color: #fff;
  font-size: 12px;
  border-radius: 10px;
  font-family: Arial;
}
.commonwidth .cart .layer[data-v-0266f49e] {
  z-index: 1000;
  /* background: #ef0f0f !important; */
  /* display: none; */
  opacity: 1;
  /* transition: all .4s .2s; */
  /* transform: translateY(-200px) scaleY(0); */
  width: 400px;
  height: 400px;
  position: absolute;
  top: 50px;
  right: 0;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  background: #fff;
  border-radius: 4px;
  padding-top: 10px;
}
.commonwidth .cart .list[data-v-0266f49e] {
  height: 310px;
  overflow: auto;
  padding: 0 10px;
}
.commonwidth .cart .list .item[data-v-0266f49e] {
  border-bottom: 1px solid #f5f5f5;
  padding: 10px 0;
  position: relative;
}
.cart .list .item a[data-v-0266f49e] {
  display: flex;
  align-items: center;
  color: #333;
}
.cart .list .item a img[data-v-0266f49e] {
  height: 80px;
  width: 80px;
}
.cart .list .item a .center[data-v-0266f49e] {
  padding: 0 10px;
  width: 200px;
}
.cart .list .item a .center .name[data-v-0266f49e] {
  font-size: 16px;
}
.ellipsis-2 {
  word-break: break-all;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.cart .list .item a .center .attr[data-v-0266f49e] {
  color: #999;
  padding-top: 5px;
}
.cart .list .item a .right[data-v-0266f49e] {
  width: 100px;
  padding-right: 20px;
  text-align: center;
}
.cart .list .item a .right .price[data-v-0266f49e] {
  font-size: 16px;
  color: #cf4444;
}
.cart .list .item a .right .count[data-v-0266f49e] {
  color: #999;
  margin-top: 5px;
  font-size: 16px;
}
.cart .list .item i[data-v-0266f49e] {
  position: absolute;
  bottom: 38px;
  right: 0;
  opacity: 0;
  color: #666;
  transition: all 0.5s;
}
.commonwidth .cart .layer .foot[data-v-0266f49e] {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 70px;
  width: 100%;
  padding: 10px;
  display: flex;
  justify-content: space-between;
  background: #f8f8f8;
  align-items: center;
}
.cart .layer .foot .total[data-v-0266f49e] {
  padding-left: 10px;
  color: #999;
}
.commonwidth .cart .layer .foot .total p[data-v-0266f49e]:last-child {
  font-size: 18px;
  color: #cf4444;
}
.plain[data-v-1e3a5560] {
  border-color: #27ba9b;
  color: #27ba9b;
  background: #e6faf6;
}
.middle[data-v-1e3a5560] {
  width: 180px;
  height: 50px;
  font-size: 16px;
}

header {
  height: 132px;
  /* padding-left: 240px; */
  box-sizing: border-box;
  display: flex;
  align-items: center;
  width: 1240px;
  margin: 0 auto;
  position: relative;
}

.log {
  width: 200px;
  height: 132px;
  float: left;
}

.log img {
  width: 100%;
  height: 100%;
}

header ul {
  width: 820px;
  display: flex;
  /* justify-content: space-around; */
  padding-left: 40px;
  position: relative;
  z-index: 999;

  height: 132px;
}

.head {
  width: 100%;
  height: 132px;
  background: #ffffff;
}

header ul li {
  /* margin-right: 40px; */
  width: 38px;
  text-align: center;
  margin-left: 40px;
}

header ul li a {
  font-size: 16px;
  line-height: 132px !important;
  height: 132px;
  display: inline-block;

  color: #333;
}

.ding {
  width: 1245px;
  padding-top: 30px;
  height: 130px;
  border-bottom: 2px solid #ccc;
  background: #f5f5f5;
  position: absolute;
  top: 82px;
  left: -220px;
  z-index: 1000000 !important;

  transition: all 0.2s 0.1s;
}

.active {
  color: #3aba9b;
}

.ding ul li img {
  width: 60px;
}

.ding ul li {
  width: 160px;
  padding: 0;
  margin: 0;
  height: 130px;
  float: left;
  text-align: center;
}

.ding ul li p {
  margin-top: 10px;
}

.s {
  margin-top: 55px;
  float: left;
  width: 40px;
}

.head-fixed {
  height: 80px;
  background: #ffffff;
  width: 100%;
  position: fixed;
  top: -180px;
  z-index: 2000;
}

.head-fixed header ul li a {
  font-size: 16px;
  line-height: 80px !important;
  height: 80px;
  display: inline-block;

  color: #333;
}

.head-fixed .s {
  margin-top: 28px;
  float: left;
  width: 40px;
}

.head-fixed .log {
  width: 200px;
  height: 80px;
  float: left;
}

.activebox {
  top: 0;
  transition: all 0.3s linear;
}
</style>